<template>
	<div class="result">
		<div class="part1">
			<div class="bg">
				<img src="../../assets/images/img1.png" alt="">
				<h4>支付结果查询中<i class="el-icon-loading"></i></h4>
				<div class="btn btn1" @click="getPay">未支付，重新付款</div>
				<div class="btn" @click="payRes">已支付，立即上课</div>
			</div>
		</div>

		<div class="part2">
			<h3>操作引导</h3>
			<div class="step">
				<div class="tit">
					<span class="num">1</span>
					<span class="txt">第一步</span>
				</div>
				<p>报名-支付完成-立即上课</p>
			</div>
			<div class="step">
				<div class="tit">
					<span class="num">2</span>
					<span class="txt">第二步</span>
				</div>
				<p>添加老师微信</p>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	
	export default {
		data () {
			return {
				payStatus: false,
				wxPoll: null,
			}
		},
		created(){
			this.getTimer()
			this.payRes()
		},
		methods:{
			getPay(){
				this.$router.go(-1)
			},
			getTimer(){
				this.wxPolling ()
				let that = this
				setTimeout(() => {
					clearInterval(that.wxPoll)
				},120000)
			},
			wxPolling(){
				this.wxPoll = setInterval(() => {
					this.payRes()
				},1000)
			},
			payRes(){
				axios({
					method:"GET",
					url:`${this.$baseURL}/aliPaymentResults`,
					params: {
						userPhone: this.$route.query.phone,
						productId: this.$route.query.productId
					}
				}).then(res => {
					if(res.data.code == 200){
						clearInterval(this.wxPoll)
						this.$message({message:'支付成功，拉起获客or小程序',duration:5000});
						this.getCust()
					}
					// this.$message({message:res.data.message,duration:5000});
				})
			},
			getCust(){
				//调取获客助手接口
			}
		}
	}
</script>


<style scoped>
.result{line-height: 30px;background: url(../../assets/images/bg2.png) repeat;height: calc(100vh - 20px);padding: 10px;background-size: cover;}
.part1{background: #fff;width: calc(100vw - 20px);min-height: 300px;max-width: 730px;border-radius: 20px;margin-top: 80px;position: relative;text-align: center;}
.part1 .bg{background: url(../../assets/images/bg1.png) no-repeat;width: calc(100vw - 20px);max-width: 730px;background-size: cover;margin: auto;position: absolute;top: -100px;}
.part1 img{max-width: 90px;margin-top: 75px;}
.part1 h4{font-size: 18px;color: #333;margin-bottom: 8px;font-weight: normal;}
.part1 i{font-size: 20px;margin-left: 10px;}
.result .btn{color: #871C0F;font-size: 18px;padding: 0px 10px;background: linear-gradient(180deg, #FBD46B 0%, #FF990D 100%);line-height: 42px;border-radius: 30px;box-shadow: 0px 4px 8px #ddd;cursor: pointer;max-width: 200px;margin: auto;}
.result .btn1{background: #fff;border: 1px solid #FF990D;margin-bottom: 20px;margin-top: 30px;}
.part2{background: #fff;border-radius: 15px;margin-top: 15px;padding: 20px 25px 10px;}
.part2 h3{font-size: 20px;color: #333;text-align: center;}
.part2 .step .tit{display: inline-block;background: linear-gradient(180deg, #fff 50%, #9AE3B9 100%);font-size: 16px;color: #000;}
.part2 .step .num{display: inline-block;width: 18px;height: 18px;background: #1ACE9A;border-radius: 50%;color: #fff;font-size: 12px;line-height:18px;text-align: center;font-weight: bold;}
.part2 .step p{font-size: 17px;color: #000;margin-bottom: 20px;padding-left: 15px;padding-top: 10px;}

@media screen and (max-width: 370px) {
	.part1 .bg{background-size: contain;}
}

@media screen and (max-width: 330px) {
	.part1{min-height: 240px;}
	.part1 .bg{background-size: contain;}
	.part1 img{max-width: 70px}
	.result .btn1{margin-top: 15px;}
	.part2{padding-top: 10px;}
	.part2 .step p{font-size: 16px;margin-bottom: 10px;}
}
</style>
